<template>
    <div id="program">
        <header>
            <div class="P_date">
                <span>时间：</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form" prop="">
                        <span>产品名称：</span>
                        <el-form-item>
                            <el-input v-model="searchData" placeholder="根据文字进行搜索"></el-input>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
            <el-button type="primary" class="addBtn" @click="addBtn">添加</el-button>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe show-overflow-tooltip>
                <el-table-column prop="type" label="模块名称"></el-table-column>



                <el-table-column prop="logo" label="图片">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.logo}}</p>
                            <div slot="reference">
                                <img :src=scope.row.logo alt="">
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>



                <el-table-column prop="poster" label="二维码" width="80">
                    <template slot-scope="scope" v-if="scope.row.poster==''?'true':'false'">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.poster}}</p>
                            <div slot="reference">
                                <img :src=scope.row.poster alt="">
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>




                <el-table-column prop="name" label="产品名称"></el-table-column>
                <el-table-column prop="myappname" label="小程序名字"></el-table-column>
                <el-table-column prop="appid" label="APPID">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.appid}}</p>
                            <div slot="reference">
                                <p>{{scope.row.appid}}</p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="total_person" label="游戏人数" width="80" ></el-table-column>
                <el-table-column prop="pages" label="跳转路径">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.pages}}</p>
                            <div slot="reference">
                                <p>{{scope.row.pages}}</p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="添加时间"></el-table-column>
                <el-table-column prop="param" label="携带参数"></el-table-column>
                <el-table-column prop="sort" label="排序" width="50"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="modifyClick(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small" @click="removeClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>

<script>
import Vue from 'vue'
import jumpProgramModify  from '../modify/jumpProgramModify'
import jumpProgramAdd  from '../add/jumpProgramAdd'
import gDate from '../G_Date/gdate'
import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js'
export default {
     components:{
        gDate
    },
    data(){
        return {
            pageSize:2,
            searchData: '',//搜索内容
            total:0,//默认数据总数
            currentPage:1,//默认开始页面
            tableData: []
        }
    },
    methods:{
        faithDate:function(e){//时间组件
            this.userDate = e;
        },
        addBtn:function(e){//新增小程序
            addList(this,jumpProgramAdd)
        },
        handleCurrentChange:function(e){//点击分页
            this.currentPage = e
            this.CurrData()
        },
        modifyClick:function(e){//修改
            let obj = {}
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    obj.id = item.id
                    obj.type = item.type;
                    obj.name = item.name;
                    obj.poster = item.poster;
                    obj.myappname = item.myappname;
                    obj.appid = item.appid;
                    obj.pages = item.pages;
                    obj.param = item.param;
                    obj.sort = item.sort;
                    obj.logo = item.logo;
                    obj.person = item.total_person;
                    return obj
                }
            })
            ModifyList(this,obj,jumpProgramModify)
        },
        removeClick:function(e){//删除
            let data = {
                id:e
            }
            RemoteList(this,data,e,"jump_program/delJumpProgram")
        },
        search:function(){//搜索
            this.currentPage = 1
            this.CurrData()
        },
        CurrData:function(){//分页
            let data = {
                startTime:this.userDate?this.userDate[0]:'',
                endTime:this.userDate?this.userDate[1]:'',
                page:this.currentPage,
                name:this.searchData
            }
            DataList(this,data,'jump_program/jumpProgramList')
        }
    },
    mounted:function(){
        this.CurrData()
    }
}
</script>





